<template>
  <a :class="[type ? `el-open--${type}` : '']" @click="openLink" v-if="type === 'video' || type === 'link'">
    {{ get_title }}
    <VideoCameraFilled v-if="type === 'video'" style="width: 1em; height: 1em; margin-right: 8px" />
    <Comment v-else style="width: 1em; height: 1em; margin-right: 8px" />
  </a>
  <a :class="[type ? `el-open--${type}` : '']" @click="openLink" v-else>
    <slot></slot>
  </a>
</template>

<script setup>
// 弹出层插件
import '@layui/layer-vue/lib/index.css';
import { computed, onMounted} from 'vue'

const res = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  src: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  }
})

// vitepress默认是在服务器渲染 HTML返回客户端，layer-vue无法在服务器端渲染
// 解决方案：原则上只在 Vue 组件的 beforeMount 或 mounted 钩子中访问浏览器或 DOM API。
onMounted(() => {
  import('@layui/layer-vue/lib/layer-vue.es.js').then((module) => {
    layer = module.layer
  })
})

let get_title = computed(() => {
  switch (res.type) {
    case 'video':
      return '示范视频';
      
    default:
      return '有关要求';
  }
})


// 打开弹窗，并显示视频/内容
function openLink() {
  if (res.type == 'video') {
    // 使用 layer 的 API
    layer.open({
      type: 2,
      title: res.title + '视频演示',
      shadeClose: false,
      closeBtn: true,
      shade: 0.3,
      maxmin: true,
      area: ['800px', '502px'],
      content: '/store/sop/videoPlay.html?src=' + res.src,
      success: function (layero, index) {
        document.body.style.overflow = 'hidden';
      },
      cancel: function (index, layero) {
        // 右上角关闭按钮回调
        // return true; // 退出弹层
      },
      end: function () {
        // 弹出层关闭后的回调
        // 这里可以执行需要的操作
        document.body.style.overflow = 'auto';
      }
    });
  } else if (res.type == 'link') {
    layer.open({
      type: 1,
      title: res.title,
      shadeClose: false,
      closeBtn: true,
      shade: 0.3,
      maxmin: true,
      resizable: true, // 允许调整尺寸
      area: ['800px', '502px'],
      content: res.src,   // 目标页面的路由地址
      success: function (layero, index) {
        document.body.style.overflow = 'hidden';
        // 页面加载完成后最大化
        layer.full(v_video);
      },
      cancel: function (index, layero) {
        // 右上角关闭按钮回调
        // return true; // 退出弹层
      },
      end: function () {
        // 弹出层关闭后的回调
        // 这里可以执行需要的操作
        document.body.style.overflow = 'auto';
      }
    });
  }else {
    layer.open({
      type: 1,
      title: res.title,
      shadeClose: false,
      closeBtn: true,
      shade: 0.3,
      maxmin: true,
      resizable: true, // 允许调整尺寸
      area: ['800px', '502px'],
      content: res.src,   // 目标页面的路由地址
      success: function (layero, index) {
        document.body.style.overflow = 'hidden';
        // 页面加载完成后最大化
        layer.full(v_video);
      },
      cancel: function (index, layero) {
        // 右上角关闭按钮回调
        // return true; // 退出弹层
      },
      end: function () {
        // 弹出层关闭后的回调
        // 这里可以执行需要的操作
        document.body.style.overflow = 'auto';
      }
    });
  }
}
</script>


<script>
export default {
  name: 'ElOpen'
}
</script>

<style scoped>
.el-open--default {
  color: var(--vp-c-indigo-1);
  cursor: pointer;
  text-decoration: underline;
}

.el-open--link {
  color: #67C23A;
  cursor: pointer;
}

.el-open--video {
  color: var(--vp-c-indigo-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: var(--page-font-size);
}


.el-open--default:hover {
  color: #fe6c6f;
  /* 鼠标悬停时的字体颜色 */
  text-decoration: underline;
  /* 鼠标悬停时显示下划线 */
}

.el-open--link:hover {
  color: #fe6c6f;
  /* 鼠标悬停时的字体颜色 */
  text-decoration: underline;
  /* 鼠标悬停时显示下划线 */
}

.el-open--video:hover {
  color: #fe6c6f;
  /* 鼠标悬停时的字体颜色 */
  text-decoration: underline;
  /* 鼠标悬停时显示下划线 */
}

.vp-doc p a {
  text-indent: 0em;
}
</style>